<script setup lang="ts">
import CustomMessage from '@/components/CustomMessage/index.vue';
import { onReachBottom } from '@dcloudio/uni-app';
import { ref } from 'vue';

const isRefreshing = ref(false);
const isLoading = ref(false);
const hasMore = ref(true);
const message = ref();

// 模拟收藏文章数据
const favorites = ref([
  {
    id: 1,
    title: 'Vue3 Composition API最佳实践：从入门到精通的全方位指南',
    author: '前端小王子',
    avatar: '/static/images/avatar.png',
    date: '2024-08-15',
    views: 1250,
    likes: 98,
    cover: '/static/images/covers/1.jpg',
    category: '前端开发',
    readTime: '5分钟',
  },
  {
    id: 2,
    title: 'TypeScript类型体操进阶指南：打造类型安全的现代前端应用',
    author: 'TS大神',
    avatar: '/static/images/avatar.png',
    date: '2024-08-10',
    views: 890,
    likes: 76,
    cover: '/static/images/covers/2.jpg',
    category: '前端开发',
    readTime: '8分钟',
  },
]);

// 注册生命周期钩子
function onPullDownRefresh() {
  isRefreshing.value = true;
  setTimeout(() => {
    isRefreshing.value = false;
    uni.stopPullDownRefresh();
    message.value.show({
      type: 'success',
      title: '刷新成功',
      message: '共10条数据',
      duration: 1000,
    });
  }, 1000);
}

// 上拉加载更多
onReachBottom(() => {
  if (!hasMore.value || isLoading.value)
    return;

  isLoading.value = true;
  uni.showLoading({ title: '加载中...' });

  setTimeout(() => {
    favorites.value.push(...[
      {
        id: 3,
        title: 'UniApp跨平台开发实战：一次编写多端发布的技巧与经验',
        author: '跨端开发专家',
        avatar: '/static/images/avatar.png',
        date: '2024-08-05',
        views: 1560,
        likes: 120,
        cover: '/static/images/covers/3.jpg',
        category: '移动开发',
        readTime: '10分钟',
      },
    ]);
    hasMore.value = favorites.value.length < 10;
    isLoading.value = false;
    uni.hideLoading();
  }, 1500);
});

// 跳转文章详情
function navigateToDetail(id: number) {
  uni.navigateTo({
    url: `/pages/article/detail?id=${id}`,
  });
}

// 格式化数字
function formatNumber(value: number): string {
  if (value >= 10000) {
    return `${(value / 10000).toFixed(1)}万`;
  }
  return value.toString();
}
</script>

<template>
  <view class="min-h-screen bg-gray-50 pb-[env(safe-area-inset-bottom)]">
    <!-- 顶部标题 -->
    <view class="bg-gradient-to-r from-purple-600 to-blue-500 px-6 py-4 rounded-b-lg shadow">
      <text class="text-2xl font-bold text-white">
        我的收藏
      </text>
      <view class="text-sm text-white/80 mt-1">
        已收藏 {{ favorites.length }} 篇文章
      </view>
    </view>

    <!-- 收藏列表 -->
    <scroll-view
      scroll-y
      class="h-[calc(100vh-7.5rem)] px-2 py-3"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onPullDownRefresh"
    >
      <!-- 空状态 -->
      <view v-if="favorites.length === 0" class="flex flex-col items-center justify-center py-20">
        <image src="/static/images/empty-collection.png" class="w-40 h-40 opacity-60 mb-6" />
        <text class="text-lg text-gray-600 mb-1">
          暂无收藏内容
        </text>
        <text class="text-sm text-gray-400 mb-6">
          快去发现好文章吧~
        </text>
        <button class="bg-gradient-to-r from-purple-600 to-blue-500 text-white rounded-full px-8 py-2 text-sm">
          去首页逛逛
        </button>
      </view>

      <!-- 文章卡片 -->
      <view
        v-for="item in favorites"
        :key="item.id"
        class="bg-white rounded-xl shadow-sm mb-4 flex relative overflow-hidden active:scale-[0.98] transition-transform duration-100"
        @click="navigateToDetail(item.id)"
      >
        <!-- 封面图 -->
        <image
          :src="item.cover"
          class="w-28 h-28 rounded-lg m-3 object-cover"
          mode="aspectFill"
        />

        <!-- 文章内容 -->
        <view class="flex-1 flex flex-col py-3 pr-1">
          <!-- 标题 -->
          <text class="text-lg font-bold text-gray-800 line-clamp-2 leading-tight mb-2">
            {{ item.title }}
          </text>

          <!-- 作者信息 - 单独一行靠左 -->
          <view class="flex items-center mb-2">
            <image :src="item.avatar || '/static/images/avatar.png'" class="w-5 h-5 rounded-full mr-2" />
            <text class="text-sm text-gray-600">
              {{ item.author }}
            </text>
          </view>

          <!-- 数据统计行 - 分类标签移到最右侧 -->
          <view class="flex items-center justify-between mt-1">
            <view class="flex items-center space-x-3">
              <view class="flex items-center text-xs text-gray-500">
                <uni-icons type="eye" size="14" class="text-gray-400" />
                <text class="ml-1">
                  {{ formatNumber(item.views) }}
                </text>
              </view>
              <view class="flex items-center text-xs text-gray-500">
                <uni-icons type="hand-thumbs-up" size="14" class="text-gray-400" />
                <text class="ml-1">
                  {{ formatNumber(item.likes) }}
                </text>
              </view>
              <view class="flex items-center text-xs text-gray-500">
                <uni-icons type="clock" size="14" class="text-gray-400" />
                <text class="ml-1">
                  {{ item.readTime }}
                </text>
              </view>
            </view>

            <!-- 分类标签 - 移到数据统计行最右侧 -->
            <text class="text-xs text-purple-700 bg-purple-100 px-2 py-0.5 rounded-full">
              {{ item.category }}
            </text>
          </view>
        </view>

        <!-- 收藏按钮 -->
        <view class="absolute top-2 right-1 w-8 h-8 rounded-full bg-white/80 shadow flex items-center justify-center">
          <uni-icons type="star-filled" size="16" class="text-yellow-400" />
        </view>
      </view>

      <!-- 加载更多 -->
      <view v-if="!isLoading && hasMore" class="flex justify-center items-center py-6">
        <uni-load-more status="more" />
      </view>

      <!-- 正在加载 -->
      <view v-if="isLoading" class="flex justify-center items-center py-6">
        <uni-icons type="spinner-cycle" size="20" class="text-gray-400 animate-spin" />
        <text class="text-sm text-gray-500 ml-2">
          正在加载...
        </text>
      </view>

      <!-- 没有更多 -->
      <view v-if="!hasMore && favorites.length > 0" class="flex justify-center items-center py-6">
        <text class="text-sm text-gray-500">
          没有更多内容了~
        </text>
      </view>
    </scroll-view>
    <CustomMessage ref="message" />
  </view>
</template>
